<template>
	<view class="user-info">
		<view class="header">
			<image class="avatar" :src="formData.avatar || '/static/head.jpg'" mode="aspectFill"></image>
			<text class="username">当前用户：{{ formData.nickname }}</text>
		</view>
		
		<view class="info-list">
			<view class="info-item">
				<text class="label">用户名</text>
				<input type="text" v-model="formData.nickname" placeholder="请输入用户名" />
			</view>
			<view class="info-item">
				<text class="label">密码</text>
				<input type="text" v-model="formData.password" placeholder="请输入密码" />
			</view>
			<view class="info-item">
				<text class="label">确认密码</text>
				<input type="text" v-model="confirmPassword" placeholder="请再次输入密码" />
			</view>
			<view class="info-item">
				<text class="label">手机号</text>
				<input type="number" v-model="formData.phone" placeholder="请输入手机号" maxlength="11" />
			</view>
		</view>
		
		<view class="button-group">
			<button class="save-btn" @tap="saveUserInfo">保存修改</button>
		</view>
	</view>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
	setup() {
		const formData = ref({
			nickname: '',
			password: '',
			phone: '',
			avatar: ''
		})
		const confirmPassword = ref('')

		// 加载用户信息
		const loadUserInfo = () => {
			const storedUserInfo = uni.getStorageSync('userInfo')
			if (!storedUserInfo) return
			
			const userList = uni.getStorageSync('userList') || []
			const user = userList.find(item => item.uid === JSON.parse(storedUserInfo).uid)
			
			if (user) {
				formData.value = {
					nickname: user.nickname || '',
					password: user.password || '',
					phone: user.phone || '',
					avatar: user.avatar || ''
				}
				confirmPassword.value = user.password || ''
			}
		}

		// 保存用户信息
		const saveUserInfo = () => {
			// 验证用户名
			if (!formData.value.nickname) {
				uni.showToast({
					title: '用户名不能为空',
					icon: 'none'
				})
				return
			}

			// 验证密码
			if (formData.value.password && formData.value.password !== confirmPassword.value) {
				uni.showToast({
					title: '两次输入的密码不一致',
					icon: 'none'
				})
				return
			}

			// 验证手机号
			if (formData.value.phone && !/^1[3-9]\d{9}$/.test(formData.value.phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				return
			}

			const storedUserInfo = uni.getStorageSync('userInfo')
			if (!storedUserInfo) return
			
			const userList = uni.getStorageSync('userList') || []
			const userIndex = userList.findIndex(item => item.uid === JSON.parse(storedUserInfo).uid)
			
			if (userIndex > -1) {
				// 更新用户信息
				userList[userIndex] = {
					...userList[userIndex],
					...formData.value
				}
				uni.setStorageSync('userList', userList)
				
				uni.showToast({
					title: '保存成功',
					icon: 'success'
				})
				
				// 返回上一页
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		}

		onMounted(() => {
			loadUserInfo()
		})

		return {
			formData,
			confirmPassword,
			saveUserInfo
		}
	}
}
</script>

<style scoped>
.user-info {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding: 20rpx;
}

.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx 0;
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.avatar {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	margin-bottom: 20rpx;
	border: 4rpx solid #fff;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.username {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.info-list {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 0 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.info-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 2rpx solid #f5f5f5;
}

.info-item:last-child {
	border-bottom: none;
}

.label {
	width: 160rpx;
	font-size: 28rpx;
	color: #333;
}

input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	padding: 10rpx 0;
}

.button-group {
	padding: 40rpx 20rpx;
}

.save-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: linear-gradient(135deg, #007AFF, #00BFFF);
	color: #fff;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
	box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
	transition: all 0.3s;
}

.save-btn:active {
	transform: scale(0.98);
	opacity: 0.9;
}
</style>